<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体</title>
    <link rel="stylesheet" href="public.css">
    <style>
        @font-face {
            font-family: myFirstFont;
            src: url('Sansation_Light.ttf'), url('Sansation_Light.eot');
            /* IE9 */
            font-weight: bold;
        }

        .test {
            font-family: myFirstFont;
        }
    </style>
</head>

<body>
    <h3>CSS3 @font-face规则</h3>
    <p>使用以前 CSS 的版本，网页设计师不得不使用用户计算机上已经安装的字体。</p>
    <p>使用 CSS3，网页设计师可以使用他/她喜欢的任何字体。</p>
    <p>当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。</p>
    <p>您所选择的字体在新的 CSS3 版本有关于 @font-face 规则描述。</p>
    <p>您"自己的"的字体是在 CSS3 @font-face 规则中定义的。</p>

    <hr>
    <div>如果我是DJ，你还爱我吗？</div>
    <div class="test">如果我是DJ，你还爱我吗？</div>
</body>

</html>